<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台文章管理</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__ADMIN__css/bootstrap.min.css" rel="stylesheet">
    <link href="__ADMIN__css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="__ADMIN__css/animate.min.css" rel="stylesheet">
    <link href="__ADMIN__css/style.min.css" rel="stylesheet">
    <link href="__ADMIN__js/plugins/layer/skin/default/layer.css" rel="stylesheet">
    <link src="__ADMIN__js/plugins/layer/laypage/skin/laypage.css">
</head>
<body>
<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>文章管理</h5>
            <div class="ibox-tools">
            </div>
        </div>
        <div class="ibox-content">
                <div class="row m-b-sm m-t-sm">
                    <div class="col-md-2">
                        <a href="{:U('admin/add')}" class="btn btn-outline btn-primary">添加管理员</a>
                    </div>

                <!--<form name="admin_find" id="admin_find" action="{:U('admin/index')}" method="get"> -->
                        <div class="col-md-3">
                            <div class="input-group">
                                <input type="text" name="manager" id="manager" placeholder="请输入管理员名称" value="{$manager}" class="input-sm form-control"> <span class="input-group-btn">
                                    <button type="submit" id="submit" class="btn btn-sm btn-primary"> 搜索</button> </span>
                            </div>
                        </div>
                    <!--</form>-->
                </div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>管理员账号</th>
                    <th>头像</th>
                    <th>真实姓名</th>
                    <th>登录次数</th>
                    <th>登录时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td colspan="8" height="300px">
                            <div class="sk-spinner sk-spinner-fading-circle">
                                <div class="sk-circle1 sk-circle"></div>
                                <div class="sk-circle2 sk-circle"></div>
                                <div class="sk-circle3 sk-circle"></div>
                                <div class="sk-circle4 sk-circle"></div>
                                <div class="sk-circle5 sk-circle"></div>
                                <div class="sk-circle6 sk-circle"></div>
                                <div class="sk-circle7 sk-circle"></div>
                                <div class="sk-circle8 sk-circle"></div>
                                <div class="sk-circle9 sk-circle"></div>
                                <div class="sk-circle10 sk-circle"></div>
                                <div class="sk-circle11 sk-circle"></div>
                                <div class="sk-circle12 sk-circle"></div>
                            </div>
                        </td>
                    </tr>
                    <!--<volist name="list" id="vo">
                        <tr>
                            <td>{$vo.id}</td>
                            <td>{$vo.name}</td>
                            <td>{$vo.id}</td>
                            <td>{$vo.realname}</td>
                            <td>{$vo.loginnum}</td>
                            <td>{$vo.logintime}</td>
                            <td>
                                <if condition="($vo.status eq 1)">
                                    <a href="javascript:changeMode({$vo.id})" id="mode{$vo.id}" class="btn btn-success btn-rounded">正常</a>
                                    <else />
                                    <a href="javascript:changeMode({$vo.id})" id="mode{$vo.id}" class="btn btn-default btn-rounded">禁用</a>
                                </if>
                            </td>
                            <td>
                                <a href="{:U('admin/edit?id='.$vo['id'])}" type="button" class="btn btn-outline btn-info"><i class="fa fa-pencil-square-o"></i>修改</a>
                                <a href="javascript:changeDel({$vo.id})" class="btn btn-outline btn-danger"><i class="fa fa-trash-o"></i>删除</a>
                            </td>
                        </tr>

                    </volist> -->
                </tbody>
            </table>
            <div id="pages" style="text-align: center"><!--{$page} tp的分页输出--></div>


        </div>
    </div>
</div>
<script src="__ADMIN__js/jquery.min.js"></script>
<script src="__ADMIN__js/plugins/layer/layer.min.js"></script>
<script src="__ADMIN__js/plugins/layer/laypage/laypage.js"></script>
<script src="__ADMIN__js/common.js"></script>
</body>
<script>
    //第二种分页
/*    var manager = '{$manager}';
    laypage({
        cont: 'pages',
        skip: true, //是否开启跳页
        groups: 3, //连续显示分页数
        skin: '#FFEC8B',
        pages: {$pagetotal}, //可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18
        curr: function(){ //通过url获取当前页，也可以同上（pages）方式获取
            var page = location.search.match(/page=(\d+)/);
            return page ? page[1] : 1;
        }(),
        jump: function(e, first){ //触发分页后的回调
            if(!first){ //一定要加此判断，否则初始时会无限刷新
                location.href = '?manager='+manager+'&page='+e.curr;
            }
        }
    });*/
    //第三种分页：
    var page = 1, title = '';
    function demo(curr,title = ''){
        $.getJSON("{:U("admin/listPage")}", {
            page: curr || 1, //向服务端传的参数，此处只是演示
            manager:title//控制器接受的参数，用get传递
        }, function(res){
            //此处仅仅是为了演示变化的内容
            var demoContent = (new Date().getTime()/Math.random()/1000)|0;
            document.getElementById('tbody').innerHTML = res.content;
            //显示分页
            laypage({
                cont: 'pages', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                skip: true, //是否开启跳页
                groups: 3, //连续显示分页数
                skin: '#FFEC8B',
                pages: res.pages, //通过后台拿到的总页数
                curr: curr || 1, //当前页
                jump: function(obj, first){ //触发分页后的回调
                    if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                        page = obj.curr;
                        demo(obj.curr,title);
                    }
                }
            });
        });
    };
    //运行
    demo();
    $('#submit').click(function(){
       title = $('#manager').val();
        console.log(title);
        if(title == ''){
            common.error('搜索内容不能为空');
            return false;
        }
        demo(page,title);
    });

    function changeMode(id){
        var mode = $("#mode"+id);
        common.status("{:U('admin/changeMode')}",id,mode);
    }
    function changeDel(id){
        layer.msg('你确定要删除吗？', {
            time: 0 //不自动关闭
            ,btn: ['必须啊', '放你一马']
            ,yes: function(index){
                common.del("{:U('admin/changeDel')}",id,'/admin/admin/index');
            }
        });

    }
</script>
</html>
